Guide de développement de l'intégration de l'API Web FormRead
Pour les utilisations en entreprise, l'API peut être utilisée en générant un jeton d'authentification Bearer.
Connectez-vous au tableau de bord FormRead tableau de bord et accédez à l'option Token API:
Créez les jetons API pour permettre à des services tiers de s'authentifier auprès de notre application en votre nom:
Copiez le jeton généré dans un endroit sécurisé (il ne sera affiché qu'une seule fois):
Créer un nouveau formulaire
Request
POST /api/formscurl --location --request POST 'https://formread.org/api/forms' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer grqr7w3pZ4u7Kif7CJpICzhBitOFXbq4VvXfGvMA' \
--form 'form_name="new form"' \
--form 'custom_css="{ingest custom css to edit FormRead View}"'Response
{
id: 8,
form_name: "new form",
iframe_token: "6ifvCyEcjB3D5SGqtFmJ5eg0sPYNQfLoWCEgv7bb",
created_at: "2022-02-28T21:22:55.000000Z",
updated_at: "2022-02-28T21:22:55.000000Z"
}
La variable custom_css permettra d'ingérer des règles css pour modifier l'apparence de FormRead et ajouter du texte personnalisé, comme par exemple :
#app-title::after{
content: 'Your Tittle';
color: white;
}
#app-subtitle::after{
content: 'Your Custom sub-tittle Your Custom sub-tittle Your Custom sub-tittle';
color: white;
}
#upload-from-cam{
display: none;
}
#upload-from-system{
background: lightblue;
}
#upload-from-csv{
display: none;
}
#app > div.bg-gray-50.h-screen.overflow-auto > div > div{
background-color: black;
}Obtenir le formulaire par ID
Request
GET /api/forms/{form_id}curl --location --request GET 'https://formread.org/api/forms/8' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer kHMwPfhJC9rJyhR7h0L78j1OB9FXErF9JseFCXH9'Response
{
"id": 8,
"form_name": "adsf",
"thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAA...",
"iframe_token": "po75a0pqut4fa16XWgdEP2qRDwnhgfiqP3H0Dij6",
"created_at": "2022-02-28T21:22:55.000000Z",
"updated_at": "2022-03-01T01:40:19.000000Z"
} la vignette une URL src qui contient une forme d'image générale:
Modifier un formulaire
Après qu'un formulaire a été créé ou obtenu, il peut être affiché dans un iframe en utilisant le iframe_token fourni dans la réponse (ce jeton varie donc assurez-vous de récupérer votre formulaire avant de rendre l'iframe)
Créez également un script qui écoute les événements de l'iframe comme dans l'exemple ci-dessous:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height: 100%">
<iframe src="https://formread.org/{lang}/api/forms/{form_id}/edit/{iframe_token}/{read_only}"
style="height: 100%; width: 100%"></iframe>
<script>
window.addEventListener('message', function (e) {
// if (e.origin !== 'https://formread.org') return;
console.log(e.data.method)
if (e.data.method === "editForm") {
let formData = e.data.formData // data used to saved your form
let schema = JSON.parse(e.data.schema)
console.log(schema)
console.log(formData)
}
if (e.data.method === "getResults") {
let results = JSON.parse(e.data.results)
console.log(results)
}
if (e.data.method === "rowResult") {
let rowResult = JSON.parse(e.data.rowResult)
console.log(rowResult)
}
});
</script>
</body>
</html>
Définissez la variable lang pour afficher les commandes de l'application dans la langue désirée. Actuellement, nous prenons en charge l'anglais (en), le français (fr), l'espagnol (es), le portugais brésilien (pt) ou le kazakh (kk)
La variable read_only peut être définie sur 1 pour désactiver la modification du formulaire ou 0 pour autoriser la modification du formulaire
Lorsque les utilisateurs cliquent sur le bouton Enregistrer, la méthode editForm sera déclenchée, vous avez alors accès à 2 variables :
-
La variable
formDatacontiendra les attributs de formulaire encodés qui peuvent être envoyés en utilisant la mise à jour pour enregistrer les modifications apportées à votre formulaire : -
la variable
schemavous permettra de savoir quels champs ont été créés jusqu'à présent:{ "file_name": { "type": "text" }, "BCR-0": { "type": "text" }, "OCR-1": { "type": "text" }, "OMR-2-0": { "type": "select", "options": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], "questionIndex": "0" }, "OMR-2-1": { "type": "select", "options": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], "questionIndex": "1" }, "OMR-2-2": { "type": "select", "options": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], "questionIndex": "2" } }La variable
schemaest destinée uniquement à vous permettre d'afficher des alertes à vos utilisateurs dans le cas où vous exigeriez que des champs de zone obligatoires soient créés:
Lorsqu'un utilisateur clique sur télécharger les résultats, la méthode getResults sera déclenchée, vous obtiendrez alors les données de résultat dans un format JSON afin que vous puissiez les stocker dans votre système
De plus, vous pouvez obtenir les résultats ligne par ligne avec la méthode rowResult, qui sera déclenchée à chaque fois qu'une page est traitée
Mettre à jour le formulaire
Request
GET /api/forms/{form_id}?_method=PUTcurl --location --request POST 'https://formread.org/api/forms/8?_method=PUT' \
--header 'Authorization: Bearer kHMwPfhJC9rJyhR7h0L78j1OB9FXErF9JseFCXH9' \
--form 'form_data="eyJ2dWV4X3N0YXRlIjp7ImZvcm1OYW1lIjoiYWRzZiIsImZvcm1zIjp7f
Swic2VsZWN0ZWRGb3JtSWQiOiIiLCJmb3JtUmVhZEFyZWFzIjp7IkJDUi
0wIjp7ImNvbHVtblBvc2l0aW9uIjoxLCJ3aWR0aCI6MC4xMTQ5NTA0NTM
0MDUzNTE2NCwiaGVpZ2h0IjowL...'
--form 'custom_css="{ingest custom css to edit FormRead View}"'Response
{
"id": 8,
"form_name": "adsf",
"iframe_token": "po75a0pqut4fa16XWgdEP2qRDwnhgfiqP3H0Dij6",
"thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...",
"created_at": "2022-02-28T21:22:55.000000Z",
"updated_at": "2022-03-01T02:30:14.000000Z"
}Supprimer le formulaire
Request
GET /api/forms/{form_id}curl --location --request DELETE 'https://formread.org/api/forms/8' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer kHMwPfhJC9rJyhR7h0L78j1OB9FXErF9JseFCXH9'Response
1